require(['./config'], () => {
    require(['template', 'header','footer'],(template, header)=>{
        class Detail {
            constructor () {
                this.getData().then(() => {
                    this.addToCart()
                })
            }
            getData () {
                const id = location.search.slice(4)
                return new Promise((resolve, reject) => {
                    $.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${id}&normal=1&sa=`, resp => {
                        if(resp.code === 200) {
                            const {
                                id,
                                title,
                                photo,
                                price,
                                coupon,
                                qunTitle,
                                descContentList,
                                shop
                            } = resp.data.detail
                            this.detail = {
                                id,
                                title,
                                photo,
                                price,
                                coupon,
                                qunTitle,
                                descContentList,
                                shop
                            }
                            $('#design').html(
                                template('detailTmplate',{ ...this.detail })
                            )
                            // 渲染完成后resolve 
                            resolve()
                        }
                        // 放大镜
                        class Magnifier {
                            constructor() {
                                this.xiangxi = document.querySelector('.xiangxi')
                                this.girlImg = document.querySelector('.girlImg')
                                this.box = document.querySelector('#box')
                                this.span = document.querySelector('#box span')
                                this.imgList = document.querySelectorAll('ol li')
                                this.bigBox = document.querySelector('.bigBox')
                                this.bigImg = document.querySelectorAll('.bigBox img')
                                this.bindEvents()
                            }
                            bindEvents () {
                                this.box.onmouseenter = () => {
                                    this.toggleDisplay('block')
                                }
                                this.box.onmouseleave = () => {
                                    this.toggleDisplay('none')
                                }
                                this.box.onmousemove = e =>{
                                    this.move(e)
                                }
                            }
                            toggleDisplay (display) {
                                this.span.style.display = display
                                this.bigBox.style.display = display
                            }
                            move(e){
                                var left = e.pageX - this.xiangxi.offsetLeft - this.box.offsetLeft - this.span.offsetWidth / 2
                                var top = e.pageY - this.xiangxi.offsetTop - this.box.offsetTop - this.span.offsetHeight / 2
                                if(left < 0){
                                    left = 0
                                }
                                if(top < 0){
                                    top = 0
                                }
                                if(left > this.box.offsetWidth - this.span.offsetWidth){
                                    left = this.box.offsetWidth - this.span.offsetWidth
                                }
                                if(top > this.box.offsetHeight - this.span.offsetHeight){
                                    top = this.box.offsetHeight - this.span.offsetHeight
                                }
                                for(var a = 0; a<this.bigImg.length; a++){
                                    this.span.style.left = left + 'px'
                                    this.span.style.top = top + 'px'
                                    this.bigImg[a].style.left = -2*left + 'px'
                                    this.bigImg[a].style.top = -2*top + 'px'
                                }
                                
                            }
                        }
                        new Magnifier()
                        // 图片切换
                        class Tab {
                            constructor() {
                                this.box = document.querySelector('#box')
                                this.girl = document.querySelectorAll('#box img')
                                this.imgBtns = document.querySelectorAll('ol li')
                                this.bigBox = document.querySelectorAll('.bigBox img')
                                this.bindEvents()
                            }
                            bindEvents () {
                                var _this = this
                                for(var i = 0; i<this.girl.length; i++){
                                    this.imgBtns[i].index = i
                                    this.imgBtns[i].onmouseenter = function () {
                                        _this.change(this.index)
                                    }
                                }
                            }
                            change (index) {
                                for (var j = 0; j<this.girl.length; j++){
                                    this.imgBtns[j].className = ''
                                    this.girl[j].className = ''
                                    this.bigBox[j].className = ''
                                }
                                this.imgBtns[index].className = 'ac'
                                this.girl[index].className = 'ac'
                                this.bigBox[index].className = 'ac'
                            }
                        }
                        new Tab
                        
                        // 规格
                        class Price {
                            constructor () {
                                this.price = document.querySelectorAll('.price b')
                                this.priceBtns = document.querySelectorAll('#priceList li')
                                this.shuoming = document.querySelectorAll('.shuoming li span')
                                this.bindEvents()
                            }
                            bindEvents () {
                                var _this = this
                                for(var i = 0; i<this.priceBtns.length; i++){
                                    this.priceBtns[i].index = i
                                    this.priceBtns[i].onclick = function () {
                                        _this.change(this.index)
                                    }
                                }
                            }
                            change (index) {
                                for (var j = 0; j<this.priceBtns.length; j++){
                                    this.priceBtns[j].className = ''
                                    this.price[j].className = ''
                                }
                                this.priceBtns[index].className = 'ac'
                                this.price[index].className = 'ac'
                                if(index==0){
                                    this.shuoming[0].textContent = '13*13cm'
                                    this.shuoming[1].textContent = '适合3-4个人分享'
                                    this.shuoming[2].textContent = '含4套餐具'
                                    this.shuoming[3].textContent = '提前5小时预定'
                                }
                                else if(index==1){
                                    this.shuoming[0].textContent = '18*18cm'
                                    this.shuoming[1].textContent = '适合７-８个人分享'
                                    this.shuoming[2].textContent = '含8套餐具'
                                    this.shuoming[3].textContent = '提前5小时预定'
                                }
                                else if(index==2){
                                    this.shuoming[0].textContent = '22*22cm'
                                    this.shuoming[1].textContent = '适合11-12个人分享'
                                    this.shuoming[2].textContent = '含12套餐具'
                                    this.shuoming[3].textContent = '提前7小时预定'
                                }
                                else{
                                    this.shuoming[0].textContent = '30*30cm'
                                    this.shuoming[1].textContent = '适合19-20个人分享'
                                    this.shuoming[2].textContent = '含20套餐具'
                                    this.shuoming[3].textContent = '提前8小时预订'
                                }
                            }
                        }
                        new Price()
                        // 数量
                        $('#btn1').click(function(){
                            var num = $("#v1").val();
                            if (num>1) {
                            $('#v1').val(num-1);
                            }else{
                            $('#v1').val(num);
                            }
                        });
                        $('#btn2').click(function(e){
                            e.stopPropagation();
                            e.preventDefault();
                            var num = $("#v1").val();
                            if (num <20) {
                            var bl = Number(num)+1;
                            $('#v1').val(bl);
                            }else{
                            $('#v1').val(num);
                            alert('最多订购20件哦')
                            }
                            
                        });
                        
                    })
                })
                
            }
            addToCart () {
                //加入购物车
                $('#addCarBtn').on('click', (e) => {

                    var x1 = e.pageX,
                        y1 = e.pageY,
                        x2 = $('#shopCart').offset().left,
                        y2 = $('#shopCart').offset().top,
                        x3 = x2 - 20,
                        y3 = y2 - 50
                        console.log(y1,y2) 
                    // 根据公式来计算一元二次方程里的三个系数
                    this.a = -((y2-y3)*x1 - (x2-x3)*y1 + x2*y3 - x3*y2) / ((x2-x3) * (x1-x2) * (x1-x3));
                    this.b = ((y2-y3)*x1*x1 + x2*x2*y3 - x3*x3*y2 - (x2*x2 - x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3));
                    this.c = ((x2*y3 - x3*y2)*x1*x1 - (x2*x2*y3 - x3*x3*y2)*x1 + (x2*x2*x3 - x2*x3*x3)*y1) / ((x2-x3)*(x1-x2)*(x1-x3)); 
                    //this.fly(x1, x2)
                    var $fly = $('<div></div>')
                    $fly.addClass('active')
                    $(document.body).append($fly)
                    var timer = setInterval( () => {
                        var top = this.a * x1 * x1 + this.b * x1 + this.c
                        $fly.offset({top:top,left:x1})
                        console.log($fly.position().top)
                        x1 += 5
                        if (x1 >= x2) {
                            clearInterval(timer)
                            $fly.remove()
                        }
                    }, 20)

                    let cart = localStorage.getItem('cart')
                    if(cart){
                        // 购物车有数据
                        cart = JSON.parse(cart)
                        // 判断是否存在同一商品
                        const isExist = cart.some(shop => {
                            return shop.id === this.detail.id
                        })
                        if (isExist) {
                            cart = cart.map(shop => {
                                if(shop.id === this.detail.id){
                                    shop.count+=Number($('#v1').val()) 
                                }
                                return shop
                            })
                        } else {
                            cart.push({ ...this.detail, count: 1, check: true })
                        }
                        localStorage.setItem('cart', JSON.stringify(cart))
                        
                    }else{
                        // 购物车为空
                        localStorage.setItem('cart', JSON.stringify([ { ...this.detail, count: 1, check: true } ]))
                    }
                    // 调用header的方法计算总数量
                    header.calcCartCount()
                })
            } 
        }
        new Detail()
        
    })
})